<template>
  <i-row
    type="flex"
    class="row-item"
    :class="{'row-item-mini': mini}"
    :justify="justify"
    :align="align"
    :gutter="12">
    <i-col :span="1" v-if="indent">
      <span>&nbsp;</span>
    </i-col>
    <i-col :span="fieldSpan" class="col-item">
      <span v-if="label" class="item-field" :class="{'row-item-must': required}">{{label}}</span>
    </i-col>
    <i-col :span="contentSpan">
      <slot></slot>
    </i-col>
  </i-row>
</template>
<script>
import Emitter from '../mixins/emitter'
export default {
  name: 'rowItem',
  mixins: [Emitter],
  props: {
    label: {
      type: String
    },
    required: {
      type: Boolean,
      default () {
        return false
      }
    },
    prop: {
      type: String
    },
    justify: {
      type: String,
      default: 'start'
    },
    align: {
      type: String,
      default: 'middle'
    },
    mini: {
      type: Boolean,
      default: false
    },
    indent: {
      type: Boolean,
      default: false
    },
    inline: {
      type: Boolean
    }
  },
  computed: {
    fieldSpan () {
      return (this.mini || this.inline) ? (this.label ? 8 : 0) : (this.indent ? 3 : 4)
    },
    contentSpan () {
      return (this.mini || this.inline) ? (this.label ? 16 : 24) : 20
    }
  },
  inject: ['form'],
  mounted () {
    if (this.prop) {
      this.dispatch('rowForm', 'on-form-item-add', this)
      // Object.defineProperty(this, 'initialValue', {
      //   value: this.fieldValue
      // })
      // this.setRules()
    }
  },
  beforeDestroy () {
    this.dispatch('rowForm', 'on-form-item-remove', this)
  }
}
</script>